<template>
  <el-dialog title="日志详情" :visible.sync="dialogVisible" width="40%" :close-on-click-modal="false">
    <el-form label-width="130px">
      <el-form-item label="服务.方法">{{ model.serviceName }}.{{ model.methodName }}</el-form-item>
      <el-form-item label="方法参数">
        <pre lang="js" style="max-height:180px;background-color: #f5f5f5;">{{ parameters }}</pre>
      </el-form-item>
      <el-form-item label="运行状况">
        <el-badge v-if="!model.exception" type="success" value="正常" :title="'正常'" class="item"></el-badge>
        <el-badge v-if="model.exception" type="danger" value="异常" :title="'异常'" class="item"></el-badge>
      </el-form-item>
      <el-form-item v-if="model.exception" label="异常信息">
        <pre style="max-height:180px;background-color: #f5f5f5;">{{ model.exception }}</pre>
      </el-form-item>
      <el-form-item label="执行IP">{{ model.clientIpAddress }}</el-form-item>
      <el-form-item label="执行客户端">{{ model.clientName }}</el-form-item>
      <el-form-item label="执行浏览器">{{ model.browserInfo }}</el-form-item>
      <el-form-item label="备注">{{ model.customData }}</el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close()">关闭</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getAuditLog } from "@/api/auditLog";

export default {
  data() {
    return {
      dialogVisible: false,
      model: {}
    };
  },
  computed: {
    parameters() {
      return this.getFormattedParameters(this.model.parameters);
    }
  },
  methods: {
    show(id) {
      getAuditLog(id).then(result => {
        this.model = result;
        this.dialogVisible = true;
      });
    },
    getFormattedParameters(parameters) {
      try {
        const json = JSON.parse(parameters);
        return JSON.stringify(json, null, 4);
      } catch (e) {
        return parameters;
      }
    },
    close() {
      this.dialogVisible = false;
    }
  }
};
</script>

<style scope>
.item {
  margin-top: 5px !important;
}
</style>
